<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="题型" prop="questionType">
        <el-select v-model="queryParams.questionType" placeholder="请选择题型" clearable>
          <el-option
            v-for="dict in dict.type.bis_question_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="难度" prop="difficulty">
        <el-select v-model="queryParams.difficulty" placeholder="请选择难度" clearable>
          <el-option
            v-for="dict in dict.type.bis_question_difficulty"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="分类" prop="categoryId">
        <input-and-search-with-tree
          v-model="queryParams.categoryId"
          @change="handleCategoryChange"
        />
      </el-form-item>
      <el-form-item label="创建者" prop="createName">
        <el-input
          v-model="queryParams.createName"
          placeholder="请输入创建者"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['question.js:questions:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['question.js:questions:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['question.js:questions:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['question.js:questions:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="questionsList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="编号" align="center" prop="questionId"/>
      <el-table-column label="标题" align="center" prop="questionTitle">
        <template #default="{ row }">
          <el-link
            type="primary"
            @click="handleTitleClick(row)"
            class="link-text"
          >
            {{ row.questionTitle || '--' }}
          </el-link>
        </template>
      </el-table-column>
<!--      <el-table-column label="题干" align="center" prop="questionTextPlain">-->
      <el-table-column label="题干" align="center" width="300px">
        <template #default="{ row }">
          <div v-html="row.questionText || '--'"></div>
        </template>
      </el-table-column>
      <el-table-column label="题型" align="center" prop="questionType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.bis_question_type" :value="scope.row.questionType"/>
        </template>
      </el-table-column>
      <el-table-column label="难度" align="center" prop="difficulty">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.bis_question_difficulty" :value="scope.row.difficulty"/>
        </template>
      </el-table-column>
      <el-table-column label="分类" align="center" prop="categoryName"/>
      <el-table-column label="知识点" align="center" prop="pointName"/>
      <el-table-column label="创建者" align="center" prop="createName"/>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['question.js:questions:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['question.js:questions:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!--    <el-dialog :visible.sync="dialogVisible">-->
    <!--      <img width="100%" :src="dialogImageUrl" alt="">-->
    <!--    </el-dialog>-->
    <!-- 添加或修改题目对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1300px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="questionTitle">
          <el-input v-model="form.questionTitle" type="" placeholder="请输入内容"/>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12" style="display: flex;">
<!--            <el-form-item label="题型" prop="questionType" style="margin-bottom: 0;">-->
<!--              <el-select-->
<!--                v-model="form.questionType"-->
<!--                placeholder="请选择题型"-->
<!--                @change="handleQuestionTypeChange(null)"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="dict in dict.type.bis_question_type"-->
<!--                  :key="dict.value"-->
<!--                  :label="dict.label"-->
<!--                  :value="dict.value"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->

            <el-form-item label="题型" prop="questionType" style="margin-bottom: 0;">
              <!-- 编辑模式（只读） -->
              <el-input
                v-if="isEditMode"
                :value="getQuestionTypeLabel(form.questionType)"
                readonly
                disabled
              />
              <!-- 新增模式（可编辑） -->
              <el-select
                v-else
                v-model="form.questionType"
                placeholder="请选择题型"
                @change="handleQuestionTypeChange(null)"
              >
                <el-option
                  v-for="dict in dict.type.bis_question_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12" style="display: flex;">
            <el-form-item label="难度" prop="difficulty">
              <el-select v-model="form.difficulty" placeholder="请选择难度">
                <el-option
                  v-for="dict in dict.type.bis_question_difficulty"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="题干" prop="questionText">
          <editor
            ref="questionEditorComponent"
            v-model="form.questionText"/>
        </el-form-item>

        <el-form-item label="答案" prop="options" v-if="showOptionsArea">
          <div class="options-container">
            <component
              ref="questionComponent"
              :is="questionTypeComponent"
              :options="dynamicOptions"
              :correctAnswer="correctAnswer"
              @updateOptions="updateOptions"
              @updateCorrectAnswer="updateCorrectAnswer"
              @removeOption="removeOption"
              @input="handleEssayAnswerChange"
            />
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="addOption" style="margin-top: 10px"
              v-if="showInputArea"
            >添加输入框
            </el-button>
          </div>
        </el-form-item>

        <el-form-item label="分类" prop="categoryId">
          <input-and-search-with-tree
            ref="categoryTree"
            v-model="form.categoryId"
            @change="handleCategoryAdd"
          />
        </el-form-item>
        <el-form-item label="知识点" prop="pointId">
          <input-and-search-with-list
            ref="pointSelect"
            v-model="form.pointId"
            :categoryId="form.categoryId"
            @change="handlePointChange"
          />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <!--    &lt;!&ndash; 题目详情弹窗 &ndash;&gt;-->
    <!--    <el-dialog title="题目详情" :visible.sync="detailVisible" width="800px" append-to-body>-->

    <!--      <el-descriptions-item label="题目ID">{{ selectedRow?.questionId || '&#45;&#45;' }}</el-descriptions-item>-->

    <!--      <div slot="footer" class="dialog-footer">-->
    <!--        <el-button @click="detailVisible = false">关 闭</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->

    <!-- 题目详情弹窗 -->
    <el-dialog
      title="题目详情"
      :visible.sync="detailVisible"
      width="800px"
      append-to-body
    >
      <el-descriptions :column="1" border v-if="selectedRow">
        <el-descriptions-item label="题目ID">{{ selectedRow.questionId || '--' }}</el-descriptions-item>
        <el-descriptions-item label="标题">{{ selectedRow.questionTitle || '--' }}</el-descriptions-item>
        <el-descriptions-item label="题干">
          <div v-html="selectedRow.questionText || '--'"></div>
        </el-descriptions-item>
        <el-descriptions-item label="题型">
          <dict-tag :options="dict.type.bis_question_type" :value="selectedRow.questionType"/>
        </el-descriptions-item>
        <el-descriptions-item label="难度">
          <dict-tag :options="dict.type.bis_question_difficulty" :value="selectedRow.difficulty"/>
        </el-descriptions-item>
        <el-descriptions-item label="分类">{{ selectedRow.categoryName || '--' }}</el-descriptions-item>
        <el-descriptions-item label="知识点">{{ selectedRow.pointName || '--' }}</el-descriptions-item>
        <el-descriptions-item label="创建者">{{ selectedRow.createName || '--' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ parseTime(selectedRow.createTime, '{y}-{m}-{d}') || '--' }}
        </el-descriptions-item>

        <!-- 根据题型显示不同内容 -->
        <template v-if="selectedRow.questionType === '1' || selectedRow.questionType === '2'">
          <el-descriptions-item label="选项">
            <div v-for="(item, index) in (selectedRow.options ? JSON.parse(selectedRow.options).items : [])"
                 :key="index">
              {{ item.value }}. {{ item.label }}
              <span
                v-if="selectedRow.questionType === '1' && selectedRow.correctAnswer === item.value"
                style="color: #67C23A"
              >
            (正确答案)
          </span>
              <span
                v-if="selectedRow.questionType === '2' && selectedRow.correctAnswer && selectedRow.correctAnswer.includes(item.value)"
                style="color: #67C23A"
              >
            (正确答案)
          </span>
            </div>
          </el-descriptions-item>
        </template>

        <template v-else-if="selectedRow.questionType === '3'">
          <el-descriptions-item label="填空答案">
            <div v-for="(item, index) in (selectedRow.options ? JSON.parse(selectedRow.options).items : [])"
                 :key="index">
              填空{{ index + 1 }}: {{ item.label || '--' }}
            </div>
          </el-descriptions-item>
        </template>

        <template v-else-if="selectedRow.questionType === '4'">
          <el-descriptions-item label="正确答案">
            {{ selectedRow.correctAnswer === '1' ? '正确' : '错误' }}
          </el-descriptions-item>
        </template>

        <template v-else-if="selectedRow.questionType === '5'">
          <el-descriptions-item label="答案">
            <div v-html="selectedRow.correctAnswer || '--'"></div>
          </el-descriptions-item>
        </template>
      </el-descriptions>

      <div slot="footer" class="dialog-footer">
        <el-button @click="detailVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listQuestions,
  getQuestions,
  delQuestions,
  addQuestions,
  updateQuestions,
} from "@/api/question/manage";
import {getFilesByIds} from '@/api/files/file'
import InputAndSearchWithTree from "@/components/InputAndSearchWithTree/index.vue";
import InputAndSearchWithList from "@/components/InputAndSearchWithList/index.vue";
import SingleChoice from "@/components/question/SingleChoice/index.vue";
import MultipleChoice from "@/components/question/MultipleChoice/index.vue";
import FillInBlank from "@/components/question/FillInBlank/index.vue";
import TrueFalse from "@/components/question/TrueFalse/index.vue";
import EssayQuestion from "@/components/question/EssayQuestion/index.vue";
import {truncateText} from "zrender/lib/graphic/helper/parseText";
import {getDicts} from "@/api/system/dict/data";

export default {
  name: "Questions",
  components: {
    InputAndSearchWithList,
    InputAndSearchWithTree,
    SingleChoice,
    MultipleChoice,
    FillInBlank,
    TrueFalse,
    EssayQuestion,
  },
  dicts: ['bis_question_type', 'bis_question_difficulty'],
  data() {
    return {
      // 其他现有数据...
      detailVisible: false, // 控制详情弹窗显示
      selectedRow: null,    // 当前选中的题目行数据
      isEditMode: false, // 控制是否处于编辑模式

      loading: true,
      ids: [],
      single: true,
      multiple: true,
      showSearch: true,
      total: 0,
      questionsList: [],
      title: "",
      open: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        questionText: null,
        questionType: null,
        difficulty: null,
        categoryId: null,
        createdBy: null,
        createName: null,
        createTime: null,
        beginTime: null,
        endTime: null
      },
      dateRange: [],
      correctAnswer: '',
      form: {
        questionId: null,
        questionTitle: null,
        questionText: null,
        questionTextPlain: null,
        questionType: null,
        difficulty: null,
        categoryId: null,
        pointId: null,
        fileIds: null,
        correctAnswer: null,
        correctAnswerPlain: null,
        options: null
      },
      dynamicOptions: [],
      rules: {
        questionText: [
          {required: true, message: "题干不能为空", trigger: "blur"}
        ],
        questionType: [
          {required: true, message: "题型不能为空", trigger: "change"}
        ],
        difficulty: [
          {required: true, message: "难度不能为空", trigger: "blur"}
        ],
        options: [
          {
            validator: (rule, value, callback) => {
              if (this.showOptionsArea && this.dynamicOptions.some(o => !o.label) &&
                this.form.questionType !== '4' && this.form.questionType !== '5') {
                callback(new Error("请填写所有选项内容"))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    };
  },
  computed: {
    showOptionsArea() {
      return ['1', '2', '3', '4', '5'].includes(this.form.questionType)
    },
    questionTypeComponent() {
      switch (this.form.questionType) {
        case '1':
          return 'SingleChoice';
        case '2':
          return 'MultipleChoice';
        case '3':
          return 'FillInBlank';
        case '4':
          return 'TrueFalse';
        case '5':
          return 'EssayQuestion';
        default:
          return '';
      }
    },
    showInputArea() {
      return ['1', '2', '3'].includes(this.form.questionType)
    }
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取题型名称
    getQuestionTypeLabel(value) {
      const type = this.dict.type.bis_question_type.find(d => d.value === value);
      return type ? type.label : '--';
    },
    getList() {
      this.loading = true;
      this.queryParams.beginTime = this.dateRange[0];
      this.queryParams.endTime = this.dateRange[1];
      listQuestions(this.queryParams).then(response => {
        this.questionsList = response.rows;
        this.total = response.total;
        this.loading = false;
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.dateRange = [];
      this.handleQuery();
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.questionId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    handleAdd() {
      this.reset();
      this.isEditMode = false; // 新增模式，允许修改题型
      this.open = true;
      this.title = "添加题目";
    },


    async handleUpdate(row) {
      this.reset();
      this.isEditMode = true; // 编辑模式，禁止修改题型
      const questionId = row.questionId || this.ids;
      try {
        const response = await getQuestions(questionId);
        this.form = response.data;

        // 初始化 correctAnswer 和 dynamicOptions
        this.correctAnswer = response.data.correctAnswer || '';
        this.dynamicOptions = [];

        // 处理选项回显
        if (response.data.options) {
          try {
            const optionsData = typeof response.data.options === 'string'
              ? JSON.parse(response.data.options)
              : response.data.options;
            if (optionsData?.items) {
              this.dynamicOptions = optionsData.items;
            }
          } catch (e) {
            console.error('解析options出错:', e);
          }
        }

        // 处理答案回显
        if (this.form.questionType === '1') {
          // 单选题
          this.correctAnswer = response.data.correctAnswer;
        } else if (this.form.questionType === '2') {
          // 多选题
          const answers = (response.data.correctAnswer || '').split(',');
          this.dynamicOptions.forEach(option => {
            option.checked = answers.includes(option.value);
          });
        } else if (this.form.questionType === '3') {
          // 填空题
          const answers = (response.data.correctAnswer || '').split(',');
          answers.forEach((answer, index) => {
            if (this.dynamicOptions[index]) {
              this.dynamicOptions[index].label = answer;
            }
          });
        } else if (this.form.questionType === '4') {
          // 判断题
          this.correctAnswer = response.data.correctAnswer === '1' ? '正确' : '错误';
        }

        // 4. 打开对话框（此时会触发动态组件渲染）
        this.open = true;
        this.title = "修改题目";

        // 5. 等待对话框和动态组件完全渲染
        await this.$nextTick();

        // 6. 处理问答题的特殊逻辑（富文本和文件）
        if (this.form.questionType === '5') {
          // 回显富文本答案
          // this.correctAnswer = response.data.correctAnswer || '';
          // 设置富文本内容
          this.$refs.questionComponent.setContent(response.data.correctAnswer);

          // 回显文件（需要确保 questionComponent 已渲染）
          if (this.$refs.questionComponent && this.form.fileIds) {
            const fileResponse = await getFilesByIds(this.form.fileIds);
            this.$refs.questionComponent.setFiles(fileResponse.data);
          }
        }

        // 更新分类和知识点
        if (this.$refs.categoryTree) {
          this.$refs.categoryTree.setCurrentKey(this.form.categoryId);
        }
        if (this.$refs.pointSelect) {
          await this.$nextTick();
          this.$refs.pointSelect.setCurrentValue(this.form.pointId);
        }

      } catch (error) {
        console.error('获取题目详情失败:', error);
        this.$message.error('获取题目详情失败');
      }
    },

    submitForm() {
      // 处理答案数据
      if (this.form.questionType === '1') {
        // 单选题
        this.form.correctAnswer = this.correctAnswer;
      } else if (this.form.questionType === '2') {
        // 多选题
        this.form.correctAnswer = this.dynamicOptions
          .filter(o => o.checked)
          .map(o => o.value)
          .join(',');
      } else if (this.form.questionType === '3') {
        // 填空题
        this.form.correctAnswer = this.dynamicOptions
          .map(o => o.label)
          .join(',');
      } else if (this.form.questionType === '4') {
        // 判断题
        this.form.correctAnswer = this.correctAnswer === '正确' ? '1' : '0';
      } else if (this.form.questionType === '5') {
        // 问答题
        this.form.correctAnswer = this.correctAnswer;
        // 获取问答题答案的纯文本
        if (this.$refs.questionComponent?.getPlainContent) {
          this.form.correctAnswerPlain = this.$refs.questionComponent.getPlainContent();
        }
        // 获取文件ID列表
        if (this.$refs.questionComponent?.getFileIds) {
          this.form.fileIds = this.$refs.questionComponent.getFileIds();
        }
      }

      // 处理选项数据
      if (this.showOptionsArea) {
        this.form.options = {
          type: this.form.questionType,
          items: this.dynamicOptions
        };
      }

      // 提取题干富文本去html内容
      // 确保在验证前获取纯文本内容
      if (this.$refs.questionEditorComponent && this.$refs.questionEditorComponent.getPlainText) {
        this.form.questionTextPlain = this.$refs.questionEditorComponent.getPlainText();
      }

      this.$refs["form"].validate(valid => {
        if (valid) {
          const action = this.form.questionId != null
            ? updateQuestions(this.form)
            : addQuestions(this.form);

          action.then(response => {
            console.log('=============提交成功:', response)
            this.$modal.msgSuccess(this.form.questionId != null ? "修改成功" : "新增成功");
            this.open = false;
            this.getList();
          }).catch(error => {
            console.error('提交失败:', error);
            console.error('详细错误信息:', error.response); // 添加这行
            this.$modal.msgError(error.message || '提交失败');
          });
        }
      });
    },
    handleDelete(row) {
      const questionIds = row.questionId || this.ids;
      this.$modal.confirm('是否确认删除题目编号为"' + questionIds + '"的数据项？').then(() => {
        return delQuestions(questionIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    handleExport() {
      this.download('question/manage/export', {
        ...this.queryParams
      }, `questions_${new Date().getTime()}.xlsx`);
    },
    reset() {
      this.form = {
        questionId: null,
        questionTitle: null,
        questionText: null,
        questionType: null,
        difficulty: null,
        categoryId: null,
        pointId: null,
        fileIds: null,
        correctAnswer: null,
        options: null
      };
      this.dynamicOptions = [];
      this.correctAnswer = '';
      this.resetForm("form");
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    handleQuestionTypeChange() {
      this.$refs.form.clearValidate('options');
      if (!this.form.questionId) {
        this.dynamicOptions = [];
        this.correctAnswer = '';
        this.addOption();
      }
    },
    addOption() {
      if (this.dynamicOptions.length >= 8) {
        this.$message.warning('最多添加8个填空');
        return;
      }
      const newOption = {
        label: '',
        value: String.fromCharCode(65 + this.dynamicOptions.length),
        checked: false
      };
      this.dynamicOptions.push(newOption);

      // 如果是填空题且有正确答案，设置新填空的内容
      if (this.form.questionType === '3' && this.correctAnswer?.length > this.dynamicOptions.length - 1) {
        newOption.label = this.correctAnswer[this.dynamicOptions.length - 1];
      }
    },
    removeOption(index) {
      this.dynamicOptions.splice(index, 1);
      this.dynamicOptions.forEach((item, idx) => {
        item.value = String.fromCharCode(65 + idx);
      });
    },
    updateOptions(options) {
      this.dynamicOptions = options;
    },
    updateCorrectAnswer(answer) {
      this.correctAnswer = answer;
    },
    handleEssayAnswerChange(content) {
      if (this.form.questionType === '5') {
        this.correctAnswer = content;
      }
    },
    handleCategoryChange(node) {
      this.queryParams.categoryId = node ? node.categoryId : null;
    },
    handleCategoryAdd(node) {
      this.form.categoryId = node ? node.categoryId : null;
      this.form.pointId = null;
    },
    handlePointChange(id) {
      this.form.pointId = id;
    },
    handleTitleClick(row) {
      this.selectedRow = row;
      this.detailVisible = true;
    }
  }
};
</script>

<style scoped>
.options-container {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 10px;
}

.option-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.link-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: inline-block;
  vertical-align: middle;
}

.dialog-footer {
  text-align: right;
}

/* 确保链接文本不会溢出 */
.link-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: inline-block;
  vertical-align: middle;
}
</style>

